﻿@namespace Masa.Blazor
@using StyleBuilder = Masa.Blazor.Core.StyleBuilder
@inherits Masa.Blazor.Mixins.Menuable.MMenuable

<div style="@GetStyle()"
     class="@GetClass()"
     id="@Id"
     @ref="Ref"
     @attributes="@Attributes">

    @if (IsBooted)
    {
        var css = _contentModifierBuilder
            .Add(Auto)
            .Add("fixed", ActivatorFixed)
            .AddRounded(Tile ? "0" : Rounded)
            .AddClass("menuable__content__active", IsActive)
            .AddClass(ContentClass)
            .AddTheme(ComputedTheme)
            .Build();

        var style = StyleBuilder.Create()
            .AddIf($"max-height", CalculatedMaxHeight, CalculatedMaxHeight != null)
            .AddIf($"min-width", CalculatedMinWidth, CalculatedMinWidth != null)
            .AddIf($"max-width", CalculatedMaxWidth, CalculatedMaxWidth != null)
            .AddIf($"top", CalculatedTop.ToUnit(), CalculatedTop != null)
            .AddIf($"left", CalculatedLeft.ToUnit(), CalculatedLeft != null)
            .Add($"transform-origin", Origin)
            .Add($"z-index", ComputedZIndex.ToString(CultureInfo.InvariantCulture))
            .Build();

        if (ContentStyle != null)
        {
            style += ";" + ContentStyle;
        }

        <CascadingValue Value="this" IsFixed>
            <CascadingValue Value="ComputedTheme" Name="MasaBlazorCascadingTheme">
                <Transition Name="@Transition">
                    <ShowTransitionElement Value="IsActive"
                                           Style="@style"
                                           Class="@css"
                                           id="@_contentId"
                                           onscroll="@OnScroll"
                                           ReferenceCaptureAction="el => ContentElement = el">
                        <MShouldRender Value="@IsActive">
                            @ChildContent
                        </MShouldRender>
                    </ShowTransitionElement>
                </Transition>
            </CascadingValue>
        </CascadingValue>
    }

</div>

@ComputedActivatorContent